import React,{ Component } from 'react';
import 'antd/dist/antd.css';
import '../css/ModifyInformation.css'
import { Input,Button,Form,Icon,message} from 'antd';
import { Redirect } from 'react-router-dom';

class ModifyInformation extends Component {
    constructor(props) {
        super(props);
        this.state={
            username:'admin',
            oldPwd:'',
            pwd1:'',
            pwd2:'',
            isRight:false,
            isPwd1Right:false,
            isPwd2Right:false,
            Redirect: false
        }
        this.handleNameChange = this.handleNameChange.bind(this);
        this.handleOldPasswordChange = this.handleOldPasswordChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleNextPasswordChange = this.handleNextPasswordChange.bind(this);
        this.LinValidator = this.LinValidator.bind(this);
       
    }
    render(){
        if(this.state.Redirect===true){
            return (<Redirect  to="/"/>)           
       }else{
        return(
        <div className="body">
             <Form className="Modify-form">
                    <Form.Item >
                        用户名:
                        <Input
                        placeholder="用户名"
                        type="username"
                        value={this.state.username}
                        onChange={this.handleNameChange}
                        />
                    </Form.Item>
                    <Form.Item >
                        旧密码:
                        <Input
                        placeholder="旧密码"
                        type="password"
                        value={this.state.oldPwd}
                        onChange={this.handleOldPasswordChange}
                        
                        />
                         <p className={this.state.isRight||this.state.oldPwd.length<6?'':'active'}>
                            *密码错误，请重新输入
                        </p>
                        <Icon type="check" className={
                            this.state.isRight&&this.state.oldPwd.length>=6?
                            'active':''}
                        />
                    </Form.Item>
                    <Form.Item>
                        新密码：
                        <Input
                        type="password"
                        placeholder="新密码"
                        value = {this.state.pwd1}
                        onChange={this.handlePasswordChange}
                        onBlur={this.LinValidator}
                        />
                        <p className={this.state.isPwd1Right||
                            this.state.pwd1.length<6?'':'active'}>
                            *密码必须包含字母和数字,并且大于6位小于12位。
                        </p>
                        <Icon type="check" className={
                            this.state.isPwd1Right&&
                            this.state.pwd1.length>=6?
                            'active':''}/>
                    </Form.Item>
                    <Form.Item>
                        再次输入密码：
                        <Input
                        type="password"
                        value={this.state.pwd2}
                        placeholder="再次输入密码"
                        onChange={this.handleNextPasswordChange}
                        />
                        <p className={this.state.isPwd2Right||this.state.pwd2.length<6?'':'active'}>
                            *密码必须保持一致
                        </p>
                        <Icon type="check" className={
                            this.state.isPwd2Right&&
                            this.state.pwd2.length>=6?
                            'active':''}/>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary"
                         className="button" 
                         onClick={this.LinValidator}>
                            确认修改
                        </Button>
                    </Form.Item>
             </Form>             
        </div>
        )             
       }
    }
    componentDidMount(){
        this.setState({
            username:this.props.location.username
        })
    }
    handleNameChange(e) {
        this.setState({
            username: e.target.value
        })
    }
    handleOldPasswordChange(e) {
        let oldPwd = e.target.value;
        this.setState({
            oldPwd: oldPwd,
            isRight:false
        })
      
        if(oldPwd==='123456'){
            this.setState({
                isRight:true
            })
        }
    }
    handlePasswordChange(e){
        let pwd = e.target.value;
        let pattern= /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;
        this.setState({
            pwd1: pwd,
            isPwd1Right:false
        })
        if(pattern.test(pwd)){
            this.setState({
                isPwd1Right:true
            })
        }       
      
    }
    handleNextPasswordChange(e) {
        let pwd2 = e.target.value;
        let pwd1 = this.state.pwd1;
        this.setState({
            pwd2: pwd2,
            isPwd2Right:false
        })
        if(pwd1===pwd2) {
           this.setState({
            isPwd2Right:true
           }) 
        }
    }
    async wait(){
        await new Promise(resolve=>{
            setTimeout(()=>{},3000)
        })
    }
    async LinValidator(e) {
       let isRight = this.state.isRight;
       let isPwd1Right = this.state.isPwd1Right;
       let isPwd2Right = this.state.isPwd2Right;
       let This = this;
       if(isRight&&isPwd1Right&&isPwd2Right){
        message.success('修改成功');
        await new Promise(resolve=>{
            setTimeout(()=>{               
                This.setState({
                    Redirect: true
                })
            },3000)
        })
        
       }
    }
}
export default ModifyInformation;